<template>
  <!-- <div :style="{ height: statusBarHeight, width: '100%' }"></div> -->
  <div
    class="fit dyh row wrap justify-center items-center content-center bg-line"
    style="position: fixed"
  >
    <div
      style="height: 100%; width: 100%; z-index: 0"
      class="absolute glass-10"
    />
    <div class="absolute-top full-width drag">
      <q-bar class="drag glass-1 rounded-borders q-pl-xs q-pa-none">
        <q-btn class="no-drag q-pa-xs" color="deep-orange" flat>
          <div class="row items-center justify-center no-wrap">
            <img
              alt=""
              src="../../public/logo.png"
              style="width: 18px; height: 18px"
            />
            <div
              v-if="$q.screen.gt.xs"
              class="text-weight-bold text-justify"
              style="font-size: 14px"
            >
              代码生成器
            </div>
          </div>
        </q-btn>

        <q-space />

        <q-btn
          v-if="$q.screen.gt.xs"
          class="no-drag"
          dense
          flat
          icon="minimize"
          @click="minimize"
        />
        <q-btn
          v-if="$q.screen.gt.xs"
          :icon="isMaximized ? 'fullscreen_exit' : 'fullscreen'"
          class="no-drag"
          dense
          flat
          @click="toggleMaximize"
        />
        <q-btn
          v-if="$q.screen.gt.xs"
          class="no-drag q-mr-xs"
          dense
          flat
          icon="close"
          @click="closeApp"
        />
      </q-bar>
    </div>
    <div
      class="q-ma-lg"
      style="
        min-width: 300px;
        width: 300px;
        z-index: 1;
        border-radius: 12px;
        overflow: hidden;
      "
    >
      <q-img
        class="rounded-borders bg-transparent"
        fit="cover"
        position="50% 50%"
        ratio="1"
        src="../../public/logo.png"
        style="margin: 0 auto; max-height: 320px"
      >
      </q-img>
    </div>
    <div
      class="q-pa-md"
      style="max-width: 500px; min-width: 200px; z-index: 10"
    >
      <div class="q-py-lg">
        <q-item-label class="text-h6 text-bold bg-red-love bg-clip-text"
          >开始使用
        </q-item-label>
        <q-input
          v-model="username"
          :rules="[
            (val) =>
              emailReg.test(val) ||
              val === '' ||
              phoneReg.test(val) ||
              usernameReg.test(val) ||
              '请输入正确的手机号用户名或邮箱',
          ]"
          class="q-py-lg"
          dense
          outlined
          lazy-rules
          placeholder="邮箱或手机号"
          type="text"
        >
          <template v-slot:append>
            <q-btn dense flat outline @click="doGetMail">
              <q-tooltip delay="700" class="bg-gradation-3f51b1-5a55ae">
                目前仅支持邮箱
              </q-tooltip>
              <div
                class="bg-red-love bg-clip-text text-no-warp text-weight-thin"
              >
                获取验证码
              </div>
            </q-btn>
          </template>
        </q-input>
        <q-input
          v-model="pwd"
          class="q-py-xs"
          dense
          outlined
          lazy-rules
          placeholder="密码或验证码"
          type="password"
        >
        </q-input>
      </div>

      <q-btn
        @click="doLogin"
        flat
        class="text-white bg-gradation-3f51b1-5a55ae full-width text-white text-bold"
      >
        <div class="text-no-warp text-body1 dyh">开始使用</div>
      </q-btn>
      <q-item dense class="row justify-center">
        <q-btn class="text-bold q-my-sm q-px-md" flat dense outline>
          <div class="bg-clip-text bg-red-love">忘记密码</div>
        </q-btn>
      </q-item>
      <q-item
        dense
        class="row justify-center bg-clip-text bg-red-love items-center"
      >
        还没有账号 ? 我不信
        <q-btn
          class="text-red-8 text-bold q-ma-sm"
          flat
          dense
          outline
          label="管你信不信"
        />
      </q-item>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { getMall, login } from 'src/api/api';
import { Loading, LocalStorage, Notify } from 'quasar';
import { useRouter } from 'vue-router';
import { useUserStore } from 'stores/userStore';
import { useSocketStore } from 'stores/useSocket';

const router = useRouter();
const minimize = () => {
  window.ipcCom.minimize();
};
const toggleMaximize = () => {
  window.ipcCom.toggleMaximize();
  isMaximized.value = window.ipcCom.isMaximized();
};
const isMaximized = ref(false);
const closeApp = () => {
  window.ipcCom.close();
};
const emailReg =
  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;
const usernameReg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
const username = ref('');
const pwd = ref('');

const doGetMail = async () => {
  const code = (await getMall(username.value)).data.code;
  console.log(code);
  if (code === 200) {
    Notify.create({
      message: username.value + '发送成功',
      classes: 'bg-gradation-3f51b1-5a55ae',
      textColor: 'white',
      icon: 'done',
      timeout: 2000,
    });
  } else {
    Notify.create({
      message: `[${username.value}] + 发送失败`,
      classes: 'bg-gradation-3f51b1-5a55ae',
      textColor: 'white',
      icon: 'close',
      timeout: 2000,
    });
  }
};
const doLogin = async () => {
  const myLoadingGroup = Loading.show({
    group: 'login-group',
    message: '验证信息...',
  });
  if (
    emailReg.test(username.value) ||
    phoneReg.test(username.value) ||
    usernameReg.test(username.value)
  ) {
    myLoadingGroup({ message: '登录中...' });

    let res = (await login(username.value, pwd.value)).data;
    if (res.code === 200) {
      Notify.create({
        type: 'positive',
        message: '登录成功',
      });
      myLoadingGroup({ message: '登录成功' });
      LocalStorage.set('token', res.data);
      Loading.hide('login-group');
      await useUserStore().getUser();
      useSocketStore().initSocket(useUserStore().user.id);
      await router.replace('index');
    } else {
      Notify.create({
        type: 'negative',
        message: res.msg || '登录失败',
      });
      Loading.hide('login-group');
    }
    console.log();
  } else {
    Notify.create({
      type: 'negative',
      message: '请输入正确的手机号或邮箱',
    });
    Loading.hide('login-group');
  }
};
onMounted(() => {
  LocalStorage.remove('token');
});
</script>
